<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="num">
    <button @click="num++">点赞</button>
    <button @click="cancel">取消点赞</button>
    <h1>hello,{{name}},有{{num}}人为你点赞</h1>
<!--        .stop阻止事件冒泡-->
    <div style="border: 1px solid red; padding: 20px" @click="hello">
        <div style="border: 1px solid blue; padding: 20px" @click.stop="hello">
            <a href="http://www.baidu.com">百度</a>
        </div>
    </div>

<!--    按键修饰符-->
    <input type="text" v-model="num" @keyup.up="num+=2" @keyup.down="num-=2">
</div>

<!--事件修饰符-->

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: '张三',
            num: 1
        },
        methods: {
            cancel() {
                this.num--
            },
            hello(){
                alert("hello")
            }
        }
    });
</script>
</body>
</html>